Tiny File Manager | issue-99-20250630164645.html

File: issue-99-20250630164645.html
Full Path: C:/htdocs/examples/issue-99-20250630164645.html
Date Modified: 04/30/2025 7:56 AM
File size: 7.52 KB
MIME-type: text/html
Charset: utf-8
Delete Open Edit Advanced Editor Back
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
    <style>body {
        padding: 20px;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<canvas id="radial-gauge"></canvas>
<canvas id="linear-gauge"></canvas>

<script>
var gauge = new RadialGauge({
    "renderTo": 'radial-gauge',
    "width": 201,
    "height": 200,
    "minValue": -7,
    "maxValue": 107,
    "value": 0,
    "units": false,
    "exactTicks": true,
    "majorTicks": [
        -7,
        0,
        20,
        80,
        100,
        107
    ],
    "minorTicks": 0,
    "strokeTicks": true,
    "animatedValue": false,
    "animateOnInit": false,
    "title": false,
    "borders": true,
    "numbersMargin": 1,
    "valueInt": 3,
    "valueDec": 2,
    "majorTicksInt": 1,
    "majorTicksDec": 0,
    "animation": true,
    "animationDuration": 500,
    "animationRule": "cycle",
    "colorPlate": "#fff",
    "colorPlateEnd": "",
    "colorMajorTicks": "#444",
    "colorMinorTicks": "#666",
    "colorTitle": "#888",
    "colorUnits": "#888",
    "colorNumbers": "#444",
    "colorNeedle": "rgba(240,128,128,1)",
    "colorNeedleEnd": "rgba(255,160,122,.9)",
    "colorValueText": "#444",
    "colorValueTextShadow": "rgba(0,0,0,0.3)",
    "colorBorderShadow": "rgba(0,0,0,0.5)",
    "colorBorderOuter": "#ddd",
    "colorBorderOuterEnd": "#aaa",
    "colorBorderMiddle": "#eee",
    "colorBorderMiddleEnd": "#f0f0f0",
    "colorBorderInner": "#fafafa",
    "colorBorderInnerEnd": "#ccc",
    "colorValueBoxRect": "#888",
    "colorValueBoxRectEnd": "#666",
    "colorValueBoxBackground": "#babab2",
    "colorValueBoxShadow": "rgba(0,0,0,1)",
    "colorNeedleShadowUp": "rgba(2,255,255,0.2)",
    "colorNeedleShadowDown": "rgba(188,143,143,0.45)",
    "colorBarStroke": "#222",
    "colorBar": "#ccc",
    "colorBarProgress": "#888",
    "colorBarShadow": "#000",
    "fontNumbers": "Arial",
    "fontTitle": "Arial",
    "fontUnits": "Arial",
    "fontValue": "Arial",
    "fontNumbersSize": 20,
    "fontTitleSize": 24,
    "fontUnitsSize": 22,
    "fontValueSize": 26,
    "fontNumbersStyle": "normal",
    "fontTitleStyle": "normal",
    "fontUnitsStyle": "normal",
    "fontValueStyle": "normal",
    "fontNumbersWeight": "normal",
    "fontTitleWeight": "normal",
    "fontUnitsWeight": "normal",
    "fontValueWeight": "normal",
    "needle": true,
    "needleShadow": true,
    "needleType": "arrow",
    "needleStart": 5,
    "needleEnd": 85,
    "needleWidth": 4,
    "borderOuterWidth": 3,
    "borderMiddleWidth": 3,
    "borderInnerWidth": 3,
    "borderShadowWidth": 3,
    "valueBox": true,
    "valueBoxStroke": 5,
    "valueBoxWidth": 0,
    "valueText": "",
    "valueTextShadow": true,
    "valueBoxBorderRadius": 2.5,
    "highlights": [
        {
            "from": -7,
            "to": 0,
            "color": "#FF0000"
        },
        {
            "from": 0,
            "to": 20,
            "color": "#FFF000"
        },
        {
            "from": 20,
            "to": 80,
            "color": "#00FF00"
        },
        {
            "from": 80,
            "to": 100,
            "color": "#FFF000"
        },
        {
            "from": 100,
            "to": 107,
            "color": "#FF0000"
        }
    ],
    "highlightsWidth": 15,
    "barWidth": 0,
    "barStrokeWidth": 0,
    "barProgress": true,
    "barShadow": 0,
    "ticksAngle": 270,
    "startAngle": 45,
    "colorNeedleCircleOuter": "#f0f0f0",
    "colorNeedleCircleOuterEnd": "#ccc",
    "colorNeedleCircleInner": "#e8e8e8",
    "colorNeedleCircleInnerEnd": "#f5f5f5",
    "needleCircleSize": 10,
    "needleCircleInner": true,
    "needleCircleOuter": true,
    "animationTarget": "needle",
    "useMinPath": false,
}).draw();

var gauge = new LinearGauge({
    "renderTo": 'linear-gauge',
    "width": 400,
    "height": 120,
    "minValue": -7,
    "maxValue": 107,
    "value": 0,
    "units": false,
    "exactTicks": true,
    "majorTicks": [
        -7,
        0,
        20,
        80,
        100,
        107
    ],
    "minorTicks": 0,
    "strokeTicks": true,
    "animatedValue": false,
    "animateOnInit": false,
    "title": false,
    "borders": true,
    "numbersMargin": 1,
    "valueInt": 3,
    "valueDec": 2,
    "majorTicksInt": 1,
    "majorTicksDec": 0,
    "animation": true,
    "animationDuration": 500,
    "animationRule": "cycle",
    "colorPlate": "#fff",
    "colorPlateEnd": "",
    "colorMajorTicks": "#444",
    "colorMinorTicks": "#666",
    "colorTitle": "#888",
    "colorUnits": "#888",
    "colorNumbers": "#444",
    "colorNeedle": "rgba(240,128,128,1)",
    "colorNeedleEnd": "rgba(255,160,122,.9)",
    "colorValueText": "#444",
    "colorValueTextShadow": "rgba(0,0,0,0.3)",
    "colorBorderShadow": "rgba(0,0,0,0.5)",
    "colorBorderOuter": "#ddd",
    "colorBorderOuterEnd": "#aaa",
    "colorBorderMiddle": "#eee",
    "colorBorderMiddleEnd": "#f0f0f0",
    "colorBorderInner": "#fafafa",
    "colorBorderInnerEnd": "#ccc",
    "colorValueBoxRect": "#888",
    "colorValueBoxRectEnd": "#666",
    "colorValueBoxBackground": "#babab2",
    "colorValueBoxShadow": "rgba(0,0,0,1)",
    "colorNeedleShadowUp": "rgba(2,255,255,0.2)",
    "colorNeedleShadowDown": "rgba(188,143,143,0.45)",
    "colorBarStroke": "#222",
    "colorBar": "#ccc",
    "colorBarProgress": "#888",
    "colorBarShadow": "#000",
    "fontNumbers": "Arial",
    "fontTitle": "Arial",
    "fontUnits": "Arial",
    "fontValue": "Arial",
    "fontNumbersSize": 20,
    "fontTitleSize": 24,
    "fontUnitsSize": 22,
    "fontValueSize": 26,
    "fontNumbersStyle": "normal",
    "fontTitleStyle": "normal",
    "fontUnitsStyle": "normal",
    "fontValueStyle": "normal",
    "fontNumbersWeight": "normal",
    "fontTitleWeight": "normal",
    "fontUnitsWeight": "normal",
    "fontValueWeight": "normal",
    "needle": true,
    "needleShadow": true,
    "needleType": "arrow",
    "needleStart": 5,
    "needleEnd": 85,
    "needleWidth": 4,
    "borderOuterWidth": 3,
    "borderMiddleWidth": 3,
    "borderInnerWidth": 3,
    "borderShadowWidth": 3,
    "valueBox": true,
    "valueBoxStroke": 5,
    "valueBoxWidth": 0,
    "valueText": "",
    "valueTextShadow": true,
    "valueBoxBorderRadius": 2.5,
    "highlights": [
        {
            "from": -7,
            "to": 0,
            "color": "#FF0000"
        },
        {
            "from": 0,
            "to": 20,
            "color": "#FFF000"
        },
        {
            "from": 20,
            "to": 80,
            "color": "#00FF00"
        },
        {
            "from": 80,
            "to": 100,
            "color": "#FFF000"
        },
        {
            "from": 100,
            "to": 107,
            "color": "#FF0000"
        }
    ],
    "highlightsWidth": 15,
    "barWidth": 0,
    "barStrokeWidth": 0,
    "barProgress": true,
    "barShadow": 0,
    "ticksAngle": 270,
    "startAngle": 45,
    "colorNeedleCircleOuter": "#f0f0f0",
    "colorNeedleCircleOuterEnd": "#ccc",
    "colorNeedleCircleInner": "#e8e8e8",
    "colorNeedleCircleInnerEnd": "#f5f5f5",
    "needleCircleSize": 10,
    "needleCircleInner": true,
    "needleCircleOuter": true,
    "animationTarget": "needle",
    "useMinPath": false,
}).draw();
</script>


</body>
</html>